<?php include "header.php" ?>

  <script type="text/javascript" src="lib/OpenLayers.js"></script>
  <script type="text/javascript" src="lib/ext.js"></script>
  <script type="text/javascript" src="lib/LayerSwitcherExt.js"></script>
  <script type="text/javascript" src="lib/rcoos1.js"></script>


   <div id="content">

    <h1>Interactive Regional Map</h1>
 
          <div id="helpbar">            
          How to use this map:<br/>
          <b>Click</b> the station to get the most recent data.<br/>
          <b>The data will appear in the far right panel. <br/>                        
          </div>

        <a id="permalink" href="">Permalink</a>
        <table id="maptable">
      <tr>     
        <td>
          <a href="intmap.php?tab=4"><img src="images/maptabs1.png" usemap="#tabMap" /></a><br />
          <map name="tabMap">

            <area shape="rect" coords="0,0,140,20" href="intmap.php?tab=4" alt="view real time map">
            <area shape="rect" coords="141,0,281,20" href="indexArchived.php?tab=4" alt="view archived data map">
          </map>
          <div id=legend style="z-index:999;position:absolute;left:80px; top: 260px;"></div>
          <div id="map"></div>      
        </td>
        <td id="layerSwitch">
          <div id="LayerSwitcher"></div>       
        </td>
        <td id="rollOver">
          <div id="rolloverbox"></div>             
        </td>           
      </tr>
      <tr>
        <td>        

          <div id="tform"></div>
        </td>       
      </tr>
    </table>                      
  </div>
  
  <script type="text/javascript">
    loadMap();
  </script>


<?php include "footer.html" ?>
